<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>日历</title>
    <style>
        .outer{
            border: 1px solid orangered;
            width: 80%;
            height: 550px;
            margin: auto;
        }
        .top{
            /* border: 1px solid #000; */
            text-align: center;
            padding-top: 20px;
        }
        input[type=text]{
            height: 35px;
            border-radius: 5px;
            border: 1px solid orangered;

            /* margin-top: 10px; */
        }

        #search_btn{
            height: 39px;
            width: 80px;
            border-radius: 5px;
            border: 1px solid green;
            background-color: green;
            color: white;
            /* margin-left: -6px; */
        }

        #tbl{
          margin-top: 10px;   
        }

        /* table在div里面,希望table在该div内部居中 */
        .cal{
            margin: auto;
        }

        .cal,td{
            border: 1px solid green;
            border-collapse: collapse;
        }
        td{
            height: 30px;
            width: 60px;
            text-align: center;
        }
    </style>
</head>
<body>
    <div class="outer">
        <div class="top">
            <input type="text" id="year" placeholder="请输入年份">
            <input type="text" id="month" placeholder="请输入月份">
            <input type="button" id="search_btn" value="search">
        </div>

        <div id="tbl">
           
        </div>
    </div>

    <script>
        //DOM -获取按钮对象
        let btn = document.getElementById("search_btn");
        //获取div对象
        let div = document.getElementById("tbl");

        btn.onclick=function(){
             //获取文本框的内容
             //string
            let year = document.getElementById("year").value;
            let month = document.getElementById("month").value;
        
            //最大天数
            let max = get_max_day(year,month);
            let day = get_day_of_week(year,month,1);

            let date = new Date().getDate();
           
            //js操作属性
            //定义一个字符串
            // let str = "<table class='cal'>";
            // str+="<tr>";
            // str+="  <td>日</td>"
            // str+="  <td>一</td>"
            // str+="  <td>二</td>"
            // str+="  <td>三</td>"
            // str+="  <td>四</td>"
            // str+="  <td>五</td>"
            // str+="  <td>六</td>"
            // str+="</tr>";
            str= `<table class='cal'>
                <tr>
                    <td>日</td>
                    <td>一</td>
                    <td>二</td>
                    <td>三</td>
                    <td>四</td>
                    <td>五</td>
                    <td>六</td>
                </tr>`;
            str+="<tr>";
            let count = 0;
            for(let i=0;i<day;i++){
                str+="<td></td>";
                count++;
            }
            for(let i=1;i<=max;i++){
                if(i==date){
                    str+=`<td style='background-color:green;color:white'>${i}</td>`;
                }else{
                    //str+="<td>"+i+"</td>";
                    str+=`<td>${i}</td>`;
                }
              
                count++;
                if(count==7){
                    str+=`</tr><tr>`;
                    count=0;
                }
            }
            str+="</table>";
            div.innerHTML = str;
        }
       
        
        //绑定事件
        // btn.onclick=function(){
        //      //获取文本框的内容
        //      //string
        //     let year = document.getElementById("year").value;
        //     let month = document.getElementById("month").value;
        
        //     //最大天数
        //     let max = get_max_day(year,month);
        //     let day = get_day_of_week(year,month,1);

        //     let date = new Date().getDate();
           
        //     //js操作属性
        //     //定义一个字符串
        //     let str = "<table class='cal'>";
        //     str+="<tr>";
        //     str+="  <td>日</td>"
        //     str+="  <td>一</td>"
        //     str+="  <td>二</td>"
        //     str+="  <td>三</td>"
        //     str+="  <td>四</td>"
        //     str+="  <td>五</td>"
        //     str+="  <td>六</td>"
        //     str+="</tr>";
            
        //     str+="<tr>";
        //     let count = 0;
        //     for(let i=0;i<day;i++){
        //         str+="<td></td>";
        //         count++;
        //     }
        //     for(let i=1;i<=max;i++){
        //         if(i==date){
        //             str+="<td style='background-color:green;color:white'>"+i+"</td>";
        //         }else{
        //             str+="<td>"+i+"</td>";
        //         }
              
        //         count++;
        //         if(count==7){
        //             str+="</tr>";
        //             str+="<tr>";
        //             count=0;
        //         }
        //     }

        //     str+="</table>";
        //     div.innerHTML = str;
        // }

        //某年某月最大天数
        function get_max_day(year,month){
            let max = -1;
            //string->number
            month = parseInt(month);
            switch(month){
                case 1:
                case 3:
                case 5:
                case 7: 
                case 8: 
                case 10: 
                case 12:
                    max = 31;
                    break;
                case 2:
                    max=is_leap_year(year)?29:28;
                    break;
                default:
                    max = 30;
                    break;
            }
            return max;
        }

        //某年某月某日是周几
        function get_day_of_week(year,month,date){
            let d = new Date(year,month-1,date);
            return d.getDay();
        }

        //判断某年是否为闰年
        function is_leap_year(year){
            return (year%400==0) || (year%100!=0 && year%4==0);
        }
    </script>
</body>
</html>